import React,{useRef,useState,createContext} from 'react';
import { SelectContext, SelectItem ,List,ListContext,ListItem} from "./SelectMenu.style"
import LazyLoad from 'react-lazyload';
import loading from "@/assets/images/Loading.png"
import { useHistory } from "react-router-dom"


const SelectMenu = (props) => {
    // console.log(props,'----');
    const { list,selectMenu=[],defList} = props;
    const [currentIndex,setIndex]=useState(0)
    // console.log(list,defList,'----');
    list.push.apply(list,defList)
    // console.log(list,'allList');
    const changeIndex=(index)=>{
        // console.log(index,'dianji');
        setIndex(index)
    }
    // 跳转至详情页
    let navigator=useHistory()
    const navigatorTo=(id)=>{
        navigator.push(`/detail/${id}`)     
    }
    return (
        <>

             <SelectContext>
                {selectMenu.map((item,index) => {
                    // console.log(item,index);
                    return (
                        <SelectItem key={index} onClick={changeIndex.bind(this,index+1)}>
                            <div className={item.id==currentIndex?'active-title':'title'} >{item.title}</div>
                            <div className={item.id==currentIndex?'active-notes':'notes'}>{item.notes}</div>
                        </SelectItem>
                    )
                })}
            </SelectContext>
            <List>
                 {
                list.map((item,index)=>{
                    return(
                        <ListContext key={index} onClick={()=>navigatorTo(item.id)} >
                    <ListItem >
                    <LazyLoad height={100} placeholder={<img src={loading} className='load-img'/>}>
                    <img src={item.image} alt="" className="list-img" />
                    </LazyLoad>
                    <div className="list-location">·{item.location}</div>
                    <div className="list-title">{item.title}</div>
                    <div className="list-price">￥{item.price}</div>
                </ListItem>
                </ListContext>
                    )
                })
            }
            </List>
            
        </>
    )
}
export default SelectMenu